<template >
  <div class="sport-kang-box">
    <page-reload v-show="state.loadErr" @needReload="getSport"></page-reload>
    <template v-if="!state.loadErr">
      <div class="yuanze-s" v-if="state.sportData.principle">
        <div class="y-title">运动原则</div>
        <div class="y-desc" v-html="state.sportData.principle">
        </div>
      </div>
      <div class="foodCard">
        <div class="title">调理细则</div>
        <div class="s-card">
          <div class="sc-left">
            <img src="../../../assets/images/icon/kangfu.png" alt="" class="s-icon">
            <div class="strT">健康促进</div>
            <div class="norT">长期目标</div>
          </div>
          <div class="sc-right">
            <div class="s-li" v-for="(item, k) in state.sportData.longTermGoal" :key="k">{{item}}</div>
          </div>
        </div>
        <div class="s-card">
          <div class="sc-left">
            <img src="../../../assets/images/icon/cujin.png" alt="" class="s-icon">
            <div class="strT">功能康复</div>
            <div class="norT">短期目标</div>
          </div>
          <div class="sc-right">
            <div class="s-li" v-for="(item, k) in state.sportData.shortTermGoals" :key="k">{{item}}</div>
          </div>
        </div>
        <div class="s-card">
          <div class="sc-left">
            <img src="../../../assets/images/icon/shixiang.png" alt="" class="s-icon">
            <div class="strT">运动</div>
            <div class="strT">注意事项</div>
          </div>
          <div class="sc-right">
            <div class="s-li" :class="hasSpan(item)? 'no-li': ''" v-for="(item, index) in state.sportData.precautions" :key="index" v-html="item"></div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, watch, toRefs } from 'vue';
import { useRoute } from 'vue-router';
import { Toast } from 'vant';
import {http} from "@/axios/http";
import * as API from "@/axios/api";
import utils from '@/utils/utils.ts';
import PageReload from '@/components/pageReload.vue';

const route = useRoute();
let state = reactive({
  sportData: {
    evalRecipel: {},
    prescriptions: [],
    taboos: []
  },
  loadErr: false
})

let props = defineProps<{
  doLoad: boolean
}>()
let emit = defineEmits(['loadFaild'])
let { doLoad } = toRefs(props);

watch(doLoad, (newVal, oldVal) => {
  if (newVal) {
    getSport()
  }
})

let getAssetImg = (src) => {
  return new URL(src, import.meta.url).href
}

let getSport = () => {
  Toast.loading({
    mask: false,
    message: '',
    duration: 0
  })
  http({
    baseUrl: API.baseUrl,
    url: API.getSport,
    method: 'GET',
    params: {
      userId: route.query.userId
    }
  },(res) =>{
    Toast.clear()
    state.loadErr = false
    if (res && res.data && res.data.code === 200){
      let data = res.data.data
      if (data?.longTermGoal) {
        data.longTermGoal = data.longTermGoal.split('\n')
      }
      state.sportData = { ...state.sportData, ...data }
    } else {
      emit('loadFaild', 1)
      utils.toastMsg(res, state, API.getSport)
    }
  })
}

let hasSpan = (item) => {
  return item && item.includes('<span>')
}
</script>

<style scoped lang="scss">
.sport-kang-box{
  .yuanze-s{
    background-image: url("../../../assets/images/report/sport-kang.png");
  }
  .s-card{
    width: 100%;
    margin-bottom: 12px;
    background: #F2FCFF;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 12px;
    .sc-left{
      width: 65px;
      text-align: center;
      margin-right: 8px;
      .s-icon{
        width: 26px;
        height: 26px;
      }
      .strT{
        font-weight: 500;
        color: #333333;
        font-size: 14px;
      }
      .norT{
        color: rgba(51,51,51,0.8);
      }
    }
    .sc-right{
      flex: 1;
      .no-li{
        &:before{
          display: none;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.sc-right{
  flex: 1;
  .s-li{
    span{
      font-weight: bold;
    }
  }
}
</style>
